<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>windows-update-effect</title>
    <link rel="stylesheet" href="./styles.css">
</head>
<body>
    <div class="rings">
        <span style="--d:1"></span>
        <span style="--d:2"></span>
        <span style="--d:3"></span>
        <span style="--d:4"></span>
        <span style="--d:5"></span>
    </div>
    <div class="step">
        <p>正在进行更新 <span id="pct">0%</span></p>
        <p>请保持计算机打开状态。</p>
    </div>
    <div class="warning">
        计算机可能会重启几次
    </div>

    <script>
        const pct = document.getElementById('pct')
        const count = 2
        let i = 0;

        setInterval(() => {
            i++
            if (Math.random() > 0.6 && i < 100) {
                pct.innerHTML = i + '%'
            } else if (i >= 100) {
                pct.innerHTML = '100%'
            }
        }, count * 600)
    </script>
</body>
</html>